import React, { forwardRef, useImperativeHandle } from 'react'
import { CustomColumnType } from '.'
import LHModal, { useModal } from '../../Modal'

interface ColsModalProps<RecordType> {
    columns: CustomColumnType<RecordType>[] // ColumnsType<RecordType>
}

export interface ColsModalRef {
    open: () => void;
}

const ColsModal = forwardRef(<RecordType extends object = any>({
    columns
}: ColsModalProps<RecordType>, ref: React.ForwardedRef<ColsModalRef>) => {

    const modal = useModal()

    useImperativeHandle(ref, () => ({
        open: modal.open
    }));

    return (
        <LHModal
            modal={modal}
            title="列设置"
        >
            <div style={{ padding: 20 }}>
                <ul>
                    {columns.map((col) => (
                        <li key={col.key}>
                            {typeof col.title === 'function' ? '[函数标题]' : col.title} - {col.customData ? JSON.stringify(col.customData) : '无自定义数据'}
                        </li>
                    ))}
                </ul>
            </div>
        </LHModal>
    )
})

export default ColsModal